<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://gr-blogtools.googlecode.com/svn/tagsMaker/js/tagsMakerV01.obus.js" type="text/javascript"></script>
<script src=https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/js/sHTMLeditorV01A.selector.obus.js type=text/javascript></script>
<title>Online HTML Editor with Preview and Tags Maker</title>
<style>
html,body{background: #252626 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H1x605.jpg) top left repeat-x;}
body {position:relative;font-family:verdana;margin:0 auto;padding:10px 5px;width:987px;}
iframe {background:#d1c9c0 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg2_grad-H1x500.jpg) top left repeat-x;border:1px solid #222;width:990px;height:500px;display:block;margin:10px 0 10px -7px;width:101.2%;}
#code{border-radius:3px;/*background:#333;color:#fff;*/border:solid #111;border-width:4px;padding:5px 4px 4px 10px;display:block;width:65%;margin:0;display:block;height:208px;max-width:65%;min-width:65%;min-height:160px;float:left;}
#code{transition:1s;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;}
/*#code:focus{background:#eee;color:#000;}*/
.editor_out{float:right;width:32.5%;height:226px;background:#222 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H1x65.gif) bottom left repeat;}
.editor_in1{width:95.5%;background:#333;padding:0 3px 3px;border:4px solid #222;border-radius:3px;margin:0;text-align:center;}
.editor_in2{color:#fff;text-align:right;padding-right:20px;}
.editor_in2 a{font:normal 12px Times New Roman, Serif;display:inline-block;padding-top:5px;color:#bbb;text-decoration:none;text-shadow:0 0 2px #000;}
.editor_in2 a:link:visited{color:#888;}
.editor_in2 a:hover{color:red;}
/* start obus - look css link */
button,.gr_button{outline:none;height:21px;font-size:11px;font-family:Tahoma;font-weight:400;color:#aee;text-shadow:1px 1px 1px #000;border:2px solid #222;border-radius:3px;box-shadow:0 0 1px #eee;background:url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H4x23.gif) left center repeat-x;cursor:pointer;text-align:center;margin:2px 0 0}
button,.gr_button{transition:10ms ease;-o-transition:10ms ease;-ms-transition:10ms ease;-moz-transition:10ms ease;-webkit-transition:10ms ease}
.gr_button:active,button:active,.gr_button:focus,button:focus{transform:scale(0.95);-o-transform:scale(0.95);-ms-transform:scale(0.95);-moz-transform:scale(0.95);-webkit-transform:scale(0.95);border-radius:6px;box-shadow:0 0 2px #eee;border-color:#111}
button:hover,.gr_button:hover{color:#FF0}
.gr_button:active,.gr_button:focus,button:active,button:focus{color:red}
#gr_i_code,#gr_em_code,#gr_strong_code,#gr_b_code,#gr_span_code,#gr_div_code,#gr_p_code{color:orange}
#gr_h1_code,#gr_h2_code,#gr_h3_code,#gr_h4_code,#gr_h5_code,#gr_h6_code{color:#F0F}
#gr_id_code,#gr_class_code{color:lime}
#gr_ul_code,#gr_ol_code,#gr_li_code{color:#F5F5DC}
#gr_spell_code{width:44px;color:red}
#gr_html_code,#gr_style_code,#gr_link_css_code,#gr_link_js_code,#gr_script_code{width:60px}
#gr_b_code,#gr_i_code,#gr_p_code{width:30px}
#gr_em_code{width:40px}
#gr_h1_code,#gr_h2_code,#gr_h3_code,#gr_h4_code{width:36px}
#gr_h5_code,#gr_h6_code,#gr_ul_code,#gr_ol_code,#gr_li_code{width:35px}
#gr_pre_code{width:39px}
#gr_code_code,#gr_form_code{width:48px}
#gr_clear_both_code{width:82px}
#gr_nobr_code{width:47px}
#gr_hot_code{width:46px}
#header-wrap{height:60px;border:4px solid #111;border-bottom:none;background:#274b51 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H1x65.gif) top left repeat-x;}
#header-wrap h1{font:bold 30px Times New Roman;color:#eee;text-align:center;text-shadow:1px 1px #fff,-1px -1px #fff,-1px 1px #fff,1px -1px #fff;margin:0;padding:10px 0 0}
#header-wrap h1 a{color:#8B0000;text-decoration:none;display:inline-block}
#header-wrap h1 a:hover{color:red;text-decoration:none}
a{transition:1s ease;-o-transition:1s ease;-ms-transition:1s ease;-moz-transition:1s ease;-webkit-transition:1s ease}
#gr_br_code,#gr_link_code,#gr_img_code,#gr_ins_code,#gr_del_code{width:50px}
/* start obus - look css link sHTMLeditorV01A.css.obus.js */
</style>
<!-- <script src=https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/css/sHTMLeditorV01A.css.obus.js type=text/javascript></script>-->
<!--[if lte IE 8]>
<style type=text/css>
#code:focus{background:#333;color:#fff;}
#gr_cdata_code{width:66px;}
#gr_span_code,#gr_div_code{width:43px;}#gr_pre_code{width:44px;}
#gr_code_code,#gr_form_code{width:54px;}
#gr_button_code{width:57px;}
#gr_ext_link_code{width:60px;}
#gr_css_ie_code,#gr_js_ie_code{width:52px;}
#header-wrap h1{filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=35, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=235, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=335, Color='#ffffff');}
</style>
<![endif]-->
<script>
/* sHTMLeditorV01A.js * gubhugreyot * sept 2012 */
var grXX = '';
function grUD(){
  var grHE = document.grZZ.zzGR;
  var grYY = parent.grPRV.document; 
  if (grXX != grHE.value){
    grXX = grHE.value;
    grYY.open();
    grYY.write(grXX);
    grYY.close();
  }
  window.setTimeout(grUD, 300);
}
function grLD () {
    document.getElementById('code');
    grUD();
}
    window.setTimeout(grLD, 300);
</script>
<!--  <script src=https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/js/sHTMLeditorV01A.obus.js type=text/javascript></script> -->

<style>
.klb{background:#333;color:#eee;}
.htm{background:#000;color:#4ac;}
.pth{background:#eee;color:#000;}
a.gr_button{color:#fff;line-height:20px;position:relative;display:inline-block;text-decoration:none;padding:0 6px;margin-right:5px;bottom:13px;box-shadow:none;outline:none;}
</style>
</head>
<body>

<div id="wrap">
	<div id="header-wrap">
		<h1><a href="http://gubhugcss.blogspot.com/" target="_blank">Online HTML Editor with Preview and Tags Maker</a></h1>
<a class="gr_button" href="javascript:cGRp()">WHITE</a><a class="gr_button" href="javascript:cGRh()">BLACK</a><a class="gr_button" href="javascript:cGRk()">Default</a>
	</div>
	<form name="grZZ" method="post" target="grPRV">
		<div class="editor_out">
			<div class="editor_in1">
				<script type="text/javascript">grHTMLtags('code');</script>
			</div>
			<div class="editor_in2">
				<a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank">gubhugreyot - demo tutorial blogger</a>
			</div>
		</div>
		<textarea class="klb" id="code" name="zzGR">
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<title>css3 Animation - gubhugreyot</title>
<style type="text/css" media="all">
body {
    font:normal 86%  Courier New, Monospace, Monaco, Courier, Monospace;
    padding:0;
    margin:0;
    /*  background:#eee; */
}
a {
    color:#ccc;
}
a:hover {
    color:red;
}
h1 {
    font-size:110px;
    margin:0;
    text-align:center;
    padding:0;
    text-shadow:-2px 2px #555, -2px -2px #444, 2px -2px #444, 2px 2px #444, -14px 14px 10px #444;
    filter:progid:DXImageTransform.Microsoft.Shadow(Strength=20, Direction=235, Color='#000000');
}
#mybox {
    position:relative;
    height:490px;
    /*  background:#aaa; */
}
.inbox {
    position:absolute;
    top:10px;
    width:250px;
    height:250px;
    border-radius:125px;
    text-align:center;
    font:bold 30px Times New Roman;
    line-height:240px;
    text-indent:-40px;
    animation:anima infinite 6s ease alternate;
    -o-animation:anima infinite 6s ease alternate;
    -ms-animation:anima infinite 6s ease alternate;
    -moz-animation:anima infinite 6s ease alternate;
    -webkit-animation:anima infinite 6s ease alternate;
}
@keyframes anima {
    0% {left:0;transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-o-keyframes anima {
    0% {left:0;-o-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-o-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-o-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-ms-keyframes anima {
    0% {left:0;-ms-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-ms-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-ms-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-moz-keyframes anima {
    0% {left:0;-moz-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-moz-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-moz-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-webkit-keyframes anima {
    0% {left:0;-webkit-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-webkit-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-webkit-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
</style>
</head>
<body>

<div id="mybox">
	<h1><a href="http://gubhugreyot.blogspot.com" target="_blank">css3 <br/>Animation</a></h1>
	<div class="inbox">
		 gubhugreyot
	</div>
	<div style="position:absolute;top:20px;;left:10px;font:bold 16px Arial;">
		 Demo only works in browsers that support CSS3. <br/>If you are using IE, this demo will not work well,<br/> but you can use another css or html. <br/><u style="color:darkred;font:normal 20px Times New Roman, Serif;font-style:italic;">Good luck and try to play with your code!</u>
	</div>
</div>
</body>
</html>
		</textarea>
	</form>
	<div style="clear:both;">
	</div>
	<iframe name="grPRV" id="grPRV" allowtransparency="true">
	</iframe>
</div>
</body>
</html>















<!--
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://gr-blogtools.googlecode.com/svn/tagsMaker/js/tagsMakerV01.obus.js" type="text/javascript"></script>
<title>Online HTML Editor with Preview and Tags Maker</title>
<style>
html,body{background: #252626 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H1x605.jpg) top left repeat-x;}
body {position:relative;font-family:verdana;margin:0 auto;padding:10px 5px;width:987px;}
iframe {background:#d1c9c0 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg2_grad-H1x500.jpg) top left repeat-x;border:1px solid #222;width:990px;height:500px;display:block;margin:10px 0 10px -7px;width:101.2%;}
#code{border-radius:3px;background:#333;color:#fff;border:solid #111;border-width:4px;padding:5px 4px 4px 10px;display:block;width:65%;margin:0;display:block;height:208px;max-width:65%;min-width:65%;min-height:160px;float:left;}
#code{transition:1s;-o-transition:1s;-ms-transition:1s;-moz-transition:1s;-webkit-transition:1s;}
#code:focus{background:#eee;color:#000;}
.editor_out{float:right;width:32.5%;height:226px;background:#222 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H1x65.gif) bottom left repeat;}
.editor_in1{width:95.5%;background:#333;padding:0 3px 3px;border:4px solid #222;border-radius:3px;margin:0;text-align:center;}
.editor_in2{color:#fff;text-align:right;padding-right:20px;}
.editor_in2 a{font:normal 12px Times New Roman, Serif;display:inline-block;padding-top:5px;color:#bbb;text-decoration:none;text-shadow:0 0 2px #000;}
.editor_in2 a:link:visited{color:#888;}
.editor_in2 a:hover{color:red;}
/* start obus - look css link */
.gr_button{height:21px;font-size:11px;font-family:Tahoma;font-weight:400;color:#aee;text-shadow:1px 1px 1px #000;border:2px solid #222;border-radius:3px;box-shadow:0 0 1px #eee;background:url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H4x23.gif) left center repeat-x;cursor:pointer;text-align:center;margin:2px 0 0}
#gr_i_code,#gr_em_code,#gr_strong_code,#gr_b_code,#gr_span_code,#gr_div_code,#gr_p_code{color:orange}
#gr_h1_code,#gr_h2_code,#gr_h3_code,#gr_h4_code,#gr_h5_code,#gr_h6_code{color:#F0F}
#gr_id_code,#gr_class_code{color:lime}
#gr_ul_code,#gr_ol_code,#gr_li_code{color:#F5F5DC}
#gr_spell_code{width:44px;color:red}
#gr_html_code,#gr_style_code,#gr_link_css_code,#gr_link_js_code,#gr_script_code{width:60px}
#gr_b_code,#gr_i_code,#gr_p_code{width:30px}
#gr_em_code{width:40px}
#gr_h1_code,#gr_h2_code,#gr_h3_code,#gr_h4_code{width:36px}
#gr_h5_code,#gr_h6_code,#gr_ul_code,#gr_ol_code,#gr_li_code{width:35px}
#gr_pre_code{width:39px}
#gr_code_code,#gr_form_code{width:48px}
#gr_clear_both_code{width:82px}
#gr_nobr_code{width:47px}
#gr_hot_code{width:46px}
#header-wrap{height:60px;border:4px solid #111;border-bottom:none;background:#274b51 url(https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/images/bg_grad-H1x65.gif) top left repeat-x;}
#header-wrap h1{font:bold 30px Times New Roman;color:#eee;text-align:center;text-shadow:1px 1px #fff,-1px -1px #fff,-1px 1px #fff,1px -1px #fff;margin:0;padding:10px 0 0}
#header-wrap h1 a{color:#8B0000;text-decoration:none;display:inline-block}
#header-wrap h1 a:hover{color:red;text-decoration:none}
a{transition:1s ease;-o-transition:1s ease;-ms-transition:1s ease;-moz-transition:1s ease;-webkit-transition:1s ease}
button,input{transition:10ms ease;-o-transition:10ms ease;-ms-transition:10ms ease;-moz-transition:10ms ease;-webkit-transition:10ms ease}
input:active,button:active,input:focus,button:focus{transform:scale(0.95);-o-transform:scale(0.95);-ms-transform:scale(0.95);-moz-transform:scale(0.95);-webkit-transform:scale(0.95);border-radius:6px;box-shadow:0 0 2px #eee;border-color:#111}
button:hover,input:hover{color:#FF0}
.gr_button:active,.gr_button:focus{color:red}
#gr_br_code,#gr_link_code,#gr_img_code,#gr_ins_code,#gr_del_code{width:50px}
/* start obus - look css link sHTMLeditorV01A.css.obus.js */
</style>
-->

<!-- <script src=https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/css/sHTMLeditorV01A.css.obus.js type=text/javascript></script>-->

<!--[if lte IE 8]>
<style type=text/css>
#gr_cdata_code{width:66px;}
#gr_span_code,#gr_div_code{width:43px;}#gr_pre_code{width:44px;}
#gr_code_code,#gr_form_code{width:54px;}
#gr_button_code{width:57px;}
#gr_ext_link_code{width:60px;}
#gr_css_ie_code,#gr_js_ie_code{width:52px;}
#header-wrap h1{filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=35, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=235, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=335, Color='#ffffff');}
</style>
<![endif]-->

<!--
<script>
/* sHTMLeditorV01A.js * gubhugreyot * sept 2012 */
var grXX = '';
function grUD(){
  var grHE = document.grZZ.zzGR;
  var grYY = parent.grPRV.document; 
  if (grXX != grHE.value){
    grXX = grHE.value;
    grYY.open();
    grYY.write(grXX);
    grYY.close();
  }
  window.setTimeout(grUD, 300);
}
function grLD () {
    document.getElementById('code');
    grUD();
}
    window.setTimeout(grLD, 300);
</script>
-->

<!--  <script src=https://gr-blogtools.googlecode.com/svn/HTMLeditor/V01A/js/sHTMLeditorV01A.obus.js type=text/javascript></script> -->
<!--
</head>

<body>

<div id="wrap">
<div id="header-wrap">
	<h1><a href="">Online HTML Editor with Preview and Tags Maker</a></h1>
</div>
<form name="grZZ" method="post" target="grPRV">
<div class="editor_out">
<div class="editor_in1">
		<script type="text/javascript">grHTMLtags('code');</script>
</div>
<div class="editor_in2"><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank">gubhugreyot - demo tutorial blogger</a></div>
</div>
<textarea id="code" name="zzGR">
<!DOCTYPE html>
<html>
<head>
        <meta content="text/html;  charset=UTF-8">
        <title>css3 Animation - gubhugreyot</title>
<style type="text/css" media="all">
body {
    font:normal 86%  Courier, Courier New, Monospace;
    padding:0;
    margin:0;
    /*  background:#eee; */
}
a {
    color:#ccc;
    text-shadow:-2px 2px #555, -2px -2px #444, 2px -2px #444, 2px 2px #444, -14px 14px 10px #444;
}
a:hover {
    color:red;
}
h1 {
    font-size:110px;
    margin:0;
    text-align:center;
    padding:0;
}
#mybox {
    position:relative;
    height:490px;
    /*  background:#aaa; */
}
.inbox {
    position:absolute;
    top:10px;
    width:250px;
    height:250px;
    border-radius:125px;
    text-align:center;
    font:bold 30px Times New Roman;
    line-height:240px;
    text-indent:-40px;
    animation:anima infinite 6s ease alternate;
    -o-animation:anima infinite 6s ease alternate;
    -ms-animation:anima infinite 6s ease alternate;
    -moz-animation:anima infinite 6s ease alternate;
    -webkit-animation:anima infinite 6s ease alternate;
}
@keyframes anima {
    0% {left:0;transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-o-keyframes anima {
    0% {left:0;-o-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-o-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-o-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-ms-keyframes anima {
    0% {left:0;-ms-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-ms-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-ms-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-moz-keyframes anima {
    0% {left:0;-moz-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-moz-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-moz-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
@-webkit-keyframes anima {
    0% {left:0;-webkit-transform:rotate(-160deg) scale(0.4);color:#fff;background:rgba(250, 5, 0, 0.8);}
    30% {left:70%;-webkit-transform:rotate(110deg);color:yellow;background:rgba(50, 55, 255, 0.6);text-shadow:0 0 4px #000;}
    100% {left:37%;-webkit-transform:rotate(-390deg);color:green;background: rgba(255, 255, 255, 0.6);text-shadow:4px 4px 4px #000;font-size:70px;box-shadow:-1px -1px 0 #000, 8px 8px 12px #333;}
}
</style>


</head>
    
<body>

    <div id="mybox">
        <h1><a href="http://gubhugreyot.blogspot.com" target="_blank">css3 <br/>Animation</a></h1>
        <div class="inbox">gubhugreyot</div>
        <div style="position:absolute;top:20px;;left:10px;font:bold 16px Arial;">Demo only works in browsers that support CSS3. <br/>If you are using IE, this demo will not work well,<br/> but you can use another css or html. <br/><u style="color:darkred;font:normal 20px Times New Roman, Serif;font-style:italic;">Good luck and try to play with your code!</u></div>
    </div>
</body>
</html>
</textarea>
</form>
<div style="clear:both;"></div>
<iframe name="grPRV" id="grPRV" allowTransparency="true"></iframe>
</div>

</body>
</html>
-->